<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>游戏结束需要优化！！</title>
    <script>
        function getStyle(element, attr){
            return window.getComputedStyle?window.getComputedStyle(element)[attr]:element.currentStyle[attr];
        }
        //动画函数
        function myanimate(element, json,time) {
            //清理计时器
            clearInterval(element.timer);
            //设置定时器
            element.timer = setInterval(function () {
                //便利要传入的JSON对象，给每个属性设置动画
                var flag = true;
                for (var key in json) {
                    //得到现在这个属性的值
                    var now = parseInt(getStyle(element, key));
                    //目标值JSON[KEY]减去现在的值 得到步数
                    step = (json[key] - now) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    element.style[key] = now + step + 'px';
                    if(now != json[key]){
                        flag = false;
                    }
                    console.log('目标位置' + json[key] + '此时位置' + now + '步数' + step)
                }
                if (flag) {
                    clearInterval(element.timer)
                }
            }, time);
        }
    </script>
    <style>
        .test {
            width: 32px;
            height: 64px;
            background-image: url(zhainan.png);
            background-repeat: no-repeat;
            background-size: 32px 64px;
            background-position: 0 0;
            position: fixed;
            top: 100px;
            left: 100px;
        }
    </style>
</head>

<body>
    <div id="box" class="test"></div>
    <script>
        //地图
        function Map(width,height,bgc,dad){
            dad = dad||document.body;
            this.width = width || 1200;
            this.height = height || 700;
            this.bgc = bgc || 'gray';
            this.mapOption= this.createMap(dad);
        }
        //创建地图 dad表示地图的父元素
        Map.prototype.createMap = function(dad){
            var map = document.createElement('div');
            map.style.width = this.width+'px';
            map.style.height = this.height+'px';
            map.style.backgroundColor = this.bgc;
            var dad = dad || document.body;
            dad.appendChild(map);
            return {
                'width': this.width,
                'height': this.height,
                'backgroundColor': this.bgc,
                'mapself':map
            }
        }
        //人物
        function Person(ele){
            this.ele = ele;
        }
        Person.prototype.move = function(speedlevel){
            var speed;
            //选择难易程度
            if(speedlevel == 'realTMDhard'){
                speed = 9;
            }
            else if(speedlevel == 'hard'){
                speed = 5;
            }
            else if(speedlevel == 'normal'){
                speed = 2;
            }
            else if(speedlevel == 'easy'){
                speed = 1;
            }
            else {
                alert('请按规则选定模式！！先给你来个普通模式耍一耍')
                alert('请按规则选定模式！！先给你来个普通模式耍一耍')
                alert('请按规则选定模式！！先给你来个普通模式耍一耍')
                speed = 2;
                console.log(123);
            }
            console.log(speed);
            var ele = this.ele;
            var timer;
            document.onkeyup = function(e){
                var e = e || window.event;
                switch(e.keyCode){
                    //向左移动
                    case 37:
                        clearInterval(timer);
                        ele.style.backgroundImage = 'url(zhainan.png)';
                        timer = setInterval(function(){
                            var now = ele.offsetLeft;
                            ele.style.left = now-speed+'px';
                        },8)
                        break;
                    //向上移动
                    case 38:
                        clearInterval(timer);
                        console.log(ele);
                        timer = setInterval(function(){
                            var now = ele.offsetTop;
                            ele.style.top = now-speed+'px';
                        },8)
                        break;
                    //向右移动
                    case 39:
                        clearInterval(timer);
                        console.log(ele);
                        ele.style.backgroundImage = 'url(zhainanRight.png)';
                        timer = setInterval(function(){
                            var now = ele.offsetLeft;
                            ele.style.left = now+speed+'px';
                        },8)
                        break;
                    //向下移动
                    case 40:
                        clearInterval(timer);
                        timer = setInterval(function(){
                            var now = ele.offsetTop;
                            ele.style.top = now+speed+'px';
                        },8)
                        break;
                }
            }
            return ele;
        }
        //妹子
        function MM(parent,MMobj){
            MMobj = MMobj || {};
            this.width = MMobj.width || 38;
            this.height = MMobj.height || 58;
            this.url = MMobj.url || 'bingoo.png';
            this.MMself = this.createMM(parent);
        }
        //制造MM
        MM.prototype.createMM = function(parent){
            console.log(this);
            var img = document.createElement('img');
            img.style.width = this.width+'px';
            img.style.height = this.height+'px';
            img.style.position = 'absolute';
            img.src = this.url;
            parent.appendChild(img);
            return img;
        }
        //改变随机位置
        MM.prototype.runMM = function(width, height){
            this.MMself.style.left = parseInt(Math.random()*width)+'px';
            this.MMself.style.top = parseInt(Math.random()*height)+'px';
        }
        //得分
        function Point(url,width,height){
            this.width = width || 88;
            this.height = height || 88;
            this.url = url || 'pointt.png';
        }
        Point.prototype.getPointUl = function(width,height){
            width = width || 888;
            height = height || 100;
            var pointUl = document.createElement('ul');
            pointUl.style.width = width+'px';
            pointUl.style.height = height+'px';
            pointUl.style.position = 'fixed';
            pointUl.style.top = 0;
            document.body.appendChild(pointUl);
            return pointUl;
        }
        Point.prototype.getPoint = function(pointul){
            var point = document.createElement('img');
            point.style.width = this.width+'px';
            point.style.height = this.height+'px';
            point.src = this.url;
            pointul.appendChild(point);
        }
        //运行
        //传入人物、MM、地图
        function Game(person,mm,map){
            this.person = person;
            this.mm = mm.MMself;
            this.map = map;
        }
        Game.prototype.flag = 0;
        //over参数代表接触重置MM距离
        Game.prototype.start = function(pointUl,over){
            over = over || 50;
            var that = this;
            console.log(this.map.backgroundColor);
            setInterval(function(){
                //移动的人物
                var personMan = that.person;
                //MM的位置
                var mmleft = that.mm.offsetLeft;
                var mmtop = that.mm.offsetTop;
                //移动人物的位置
                var manleft = personMan.offsetLeft;
                var mantop = personMan.offsetTop;
                //移动人物和MM的距离绝对值
                var leftX = Math.abs(mmleft-manleft);
                var topX = Math.abs(mmtop-mantop);
                //如果人物和MM距离小于Over值时，触发得分效果
                if(leftX < over && topX<over){
                    //得分次数每次接触加1
                    Game.prototype.flag++;
                    var flag = Game.prototype.flag;
                    //得分数量改变得分图标以及地图背景
                    if(flag <3){
                        new Point('pointt.png').getPoint(pointUl);
                        console.log(that.map.mapself.style.backgroundColor);
                    }
                    else if(flag<8){
                        new Point('pointt2.png').getPoint(pointUl);
                        that.map.mapself.style.backgroundColor = 'firebrick';
//                        that.map.mapself.style.width = '500px';
                        myanimate(that.map.mapself, {'width': 800},2000)
                    }
                    else if(flag<18){
                        new Point('pointt3.png').getPoint(pointUl);
                        that.map.mapself.style.backgroundColor = 'darkblue';
                        myanimate(that.map.mapself, {'width': 600},1300)
                    }
                    else if(flag<24){
                        new Point('pointt4.png').getPoint(pointUl);
                        that.map.mapself.style.backgroundColor = 'indigo';
                        myanimate(that.map.mapself, {'width': 400},800)
                    }
                    else {
                        new Point('pointt5.png').getPoint(pointUl);
                        that.map.mapself.style.backgroundColor = 'greenyellow';
                        myanimate(that.map.mapself, {'width': 200},300)
                    }
                    //改变MM位置
                    this.mm.runMM(that.map.mapself.offsetWidth,that.map.mapself.offsetHeight);
                }
            if(manleft<0 || manleft>that.map.mapself.offsetWidth || mantop > that.map.mapself.offsetHeight){
                alert('你死了！！！！！！！')

            }
        },10)
        }
        //初始化地图
        /*
        * 两个参数为地图的宽和高
        * */
        var map = new Map(1300,660);
        //创建地图，返回值为此地图map的对象，包含宽度和高度和自己
        var nowMap = map.mapOption;
        //创建MM实例对象
        var mm = new MM(nowMap.mapself);
        console.log(map);
        //初始化移动小人儿
        /*
        * 传入元素
        * */
        var box = document.getElementById('box');
        var np = new Person(box);
        //返回值personMan是移动小人儿
        /*
        * move方法中传入难易等级
        * easy normal hard
        * */
        var playLev = prompt('宅男！选择难度！！easy or normal or hard and realTMDhard')
        var personMan = np.move(playLev);
        console.log(personMan);
        //得分初始化
        var point = new Point();
        //返回值是得分列表
        var pointUl = point.getPointUl()

        //游戏初始化
        /*
         * 初始化游戏传入三个参数
         * 1.移动小人
         * 2.创建的MM
         * 3.地图的返回值信息
         */
       var start = new Game(personMan,mm,nowMap);
        /*
        * 开始游戏方法中传入两个参数
        * pointUl是草莓得分加入的列表
        * 第二个参数over是触发得分的距离，可不传入，默认为30px
        * */
        start.start(pointUl);

        //游戏结束需要优化！！！！！
    </script>
</body>

</html>